import './index.scss'
import {Image, View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect} from 'react'
import Taro, {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import {productFileInfoStore} from './model'
import {imagesUrl} from '@/utils/baseUrl'
import dayjs from 'dayjs'
import {VideoIconMask} from '@/pages-setting/components/mask'
import {IconImg} from '@/components/images'

const Productfileinfo: React.FC = (): JSX.Element => {
  let router = useRouter()
  const {pageQuery, updatePageQuery, checkFile} =
    useContext(productFileInfoStore)

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Productfileinfo useEffect')
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('Productfileinfo useDidShow')
    updatePageQuery(router.params, true)
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Productfileinfo useDidHide')
  })
  return (
    <View className="p-16">
      <View className="hanzi px-12 mt-12 mb-6 text-16 font-medium">
        {pageQuery.devTypePFName}
      </View>
      <View className="notHanzi px-12 mb-26 text-12 text-xx_text">
        {pageQuery.createTime || dayjs().format('YYYY-MM-DD')}
      </View>
      <View
        className="h-200 rounded-12 mb-24 overflow-hidden relative"
        onClick={() =>
          (pageQuery.devTypePFTypeCode === '0046' ||
            pageQuery.devTypePFTypeCode === '0153') &&
          checkFile()
        }
      >
        {pageQuery.devTypePFTypeCode === '0046' ? (
          <VideoIconMask
            style={{
              width: '136rpx',
              height: '136rpx'
            }}
          ></VideoIconMask>
        ) : null}
        <Image
          src={imagesUrl + 'product.png'}
          className="w-full h-full"
        ></Image>
      </View>
      {pageQuery.devTypePFTypeCode === '0045' ? (
        <View
          className="h-98 rounded-12 overflow-hidden relative flex"
          style={{backgroundColor: '#E5ECF5'}}
          onClick={() => checkFile()}
        >
          <View className="flex-1">
            <View
              className="hanzi pl-32 mt-26 mb-4 text-16 font-medium"
              style={{color: '#4A5C77'}}
            >
              {pageQuery.devTypePFName}
            </View>
            <View
              className="hanzi pl-32 text-14 font-medium"
              style={{color: '#697F96'}}
            >
              查看/下载文档
            </View>
          </View>
          <IconImg
            imgName="pdf"
            style={{
              width: '132rpx',
              height: '132rpx',
              margin: '32rpx 64rpx 0 0'
            }}
          ></IconImg>
        </View>
      ) : null}
      <View className="text-14 leading-28 mt-24 text-x_text">
        浙江陆恒环境科技有限公司是一家集研发、生产、销售水质检测相关试剂及仪器的企业,陆恒生物立足于浙江大学华家池校区,至今已历时十载。我们一直处于水质检测行业先进地位,我们的宗旨是为客户提供...
      </View>
    </View>
  )
}
export default observer(Productfileinfo)
